<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <div class="about">
         <img class="avatar" :src="avatar" alt="">
        <div class="social">
          <p style="margin-top: 0px;margin-bottom: 5px;" class="desc">姓名:{{dataForm.userName}}</p>
          <p style="margin-top: 0px;margin-bottom: 5px;" class="desc">账号:{{dataForm.account}}</p>
           <p style="margin-top: 0px;margin-bottom: 5px;" class="desc">学校:{{dataForm.school}}</p>
          <p style="margin-top: 0px;margin-bottom: 5px;" class="desc">专业:{{dataForm.college+dataForm.profession}}</p>
        </div>
      </div>
      <el-menu
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
         unique-opened
        class="site-sidebar__menu"
        :collapseTransition="false">
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
  /* eslint-disable */
  import SubMenu from './main-sidebar-sub-menu'
  import { isURL } from '@/utils/validate'
  export default {
    data () {
      return {
        dynamicMenuRoutes: [],
        dataForm: {
          account: '',
          userName: '',
          genderName: false,
          phone: '',
          email: '',
          school: '',
          college: '',
          profession: '',
          avatar: ''
        },
      }
    },
    components: {
      SubMenu
    },
    computed: {
      avatar: {
        get () { return this.$store.state.user.avatar },
        set (val) { this.$store.commit('user/updateAvatar', val) }
      },
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)
      this.dataFormSelect()
    },
    methods: {
      // 查询
      dataFormSelect () {
        this.$http({
          url: this.$http.adornUrl('/teacher/getTeacherInfo'),
          method: 'get'
        }).then(({data}) => {
          if (data.success) {
            this.dataForm = data.data
            if(this.dataForm.avatar == undefined || this.dataForm.avatar == "" || this.dataForm.avatar == null){
              this.dataForm.avatar = this.avatar
            }else{
              this.$store.commit('user/updateAvatar', this.dataForm.avatar)
               this.dataForm.avatar = this.dataForm.avatar
            }
          } else {
            this.$message.error(data.message)
          }
        })
      },
      // 路由操作
      routeHandle (route) {
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || '',
              params: route.params,
              query: route.query
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
        }
      }
    }
  }
</script>
<style scoped>
  .about {
    position:relative;
    text-align:center;
    background-color :#fff;
    margin-top: 30px;
  }
  .background{
      position: absolute;
      top :0;
      left :0;
      right :0;
      width :100%;
      /* height :125px; */
      z-index: 1;
  }
  .avatar{
    position: relative;
    margin: 25px auto 0;
    width :100px;
    height :100px;
    border :5px solid #e8e8e8;
    border-radius :50%;
    z-index: 9;
  }
  .social{
    width: 100%;
    height: 140px;
        text-align: center;
        padding: 0 20px;
        margin-top: 15px;
  }
  .name {
      font-size: 22px;
      color: #333;
      line-height: 30px;
      font-weight: 700;
  }
  .desc{
    font-size :15px;
    color: #878d99;
    line-height :30px;
    font-weight: 100;
  }
</style>
